<template>
    <div class="menu">
        <ul>
            <li v-for="item in msgDetail" :key="item.id">
              <!-- params传参 -->
              <!-- 第一种写法，直接用字符串进行指定参数，需要拼接，会稍显麻烦 -->
                <!-- <RouterLink :to="`/message/xiangqing/${item.id}/${item.title}/${item.context}`">
                    {{ item.title }}
                </RouterLink> -->
                <!-- 第二种写法，直接指定对象进行传参即可 params传参时，只能指定name属性不能使用path-->
                <RouterLink :to="{
                  // path:'/message/xiangqing',
                  name:'xiangqing',
                  query:{
                    id:item.id,
                    title:item.title,
                    context:item.context
                  }
                }">
                    {{ item.title }}
                </RouterLink>
            </li>
        </ul>
    
    <div class="msg-context">
        <RouterView></RouterView>
    </div>
  </div>
</template>
<script lang="ts" setup name="message">
import { reactive } from 'vue';
let msgDetail=reactive([
    {id:"hkjhjk01",title:"电子商品",context:"电脑，平板，手机"},
    {id:"hkjhjk02",title:"家用电器",context:"冰箱，洗衣机，电视"},
    {id:"hkjhjk03",title:"美妆大全",context:"基础护肤，口红，防晒"},
    {id:"hkjhjk04",title:"箱包配饰",context:"项链，潮流包包"}
])
</script>
<style scoped>
.menu {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.menu ul {
  margin-top: 30px;
  list-style: none;
  padding-left: 10px;
}
.menu li>a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967E;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.msg-context{
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>